<template>
   <div class="manage"> 
     <!-- 点击新增是弹出的文本框 -->
    <el-dialog 
      :title="operateType === 'add' ? '新增用户' : '更新用户'"
      :visible.sync="isShow">
    <!-- 引入表单 -->
    <common-from :formLable="operateFormLable" :form="operateForm"></common-from>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
    </el-dialog>
     <div class="manage-header">
        <el-button type="primary" @click="handleAdd"> + 新增</el-button>
       <common-from inline :formLable="formLable" :form="searchFrom">
         <el-button type="primary">搜索</el-button>
       </common-from>
     </div>
    <div class="manage-content">
      <common-table :tableData="tableData" 
      :tableLable="tableLable" 
      :config="config"
      @changePage="getList"
      @edit="editUser"
      @del="delUser"
      >
      </common-table>
    </div>
   </div>
</template>

<script>
import CommonFrom from "../../components/CommonFrom.vue"
import CommonTable from "../../components/CommonTable.vue"
export default {
  name: 'user',
  components:{
    CommonFrom,
    CommonTable
  },
  data() {
    return {
      config:{
        //分页
        page: 1,
        total:30,
        loading: false
      },
      searchFrom:{
        keyword: ''
      },
      formLable: [{
        model: 'keyword',
        label: '',
      }],
      //点击编辑弹出表单操作类型
      operateType:'add',
      isShow:false,
      operateForm:{
          name: '',
          addr: '',
          age: '',
          birth: '',
          sex: ''
      },
      operateFormLable:[
        //绑定字段
        {
          model: 'name',
          label: '姓名'
        },
        {
          model: 'age',
          label: '年龄',
        },
        {
          model: 'sex',
          label: '性别',
          type: 'select',
          opts: [
            {
              label: '男',
              value: 1
            },
            {
              label: '女',
              value: 0
            }
          ]
        },
        {
          model: 'birth',
          label: '出生日期',
          type: 'date'
        },
        {
          model: 'addr',
          label: '地址'
        }
      ],
      tableData:[],
      //循环表格的列
      tableLable:[
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'sexLabel',
          label: '性别'
        },
        {
          prop: 'birth',
          label: '出生日期',
          width: 200
        },
        {
          prop: 'addr',
          label: '地址',
          width: 360
        },
      ],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      this.config.loading = true
      this.$http.get('/api/user/getUser',{
        params:{
          page:this.config.page
        }
      }).then(res =>{
        this.tableData = res.data.list.map(item=>{
          item.sexLabel = item.sex === 0? '女' : '男'
          return item
        })
        //分页
        this.config.total = res.data.count
        this.config.loading = false
      })
    },
    editUser(row){
      this.operateType = 'edit'
      this.isShow = true
      this.operateForm = row
    },
    //编辑用户
    confirm(){
      if(this.operateType === 'edit'){
        this.$http.post('/api/user/edit',this.operateForm).then(res=>{
          console.log(res.data);
          this.isShow = false
          this.getList()
        })
      }
    },
    //删除用户
    delUser(row){
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let id = row.id
          this.$http.get('/api/user/del',{
            params:{
              id
            }
          }).then(res =>{
            console.log(res.data);
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //新增用户
    handleAdd(){
      this.operateType = 'add',
      this.isShow = true
    }
  },
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/common.scss'
</style>